<div>
  <div class="d-input">
    <input dTextInput style="width: 180px;" [error]="false" placeholder="工单号" name="工单号" class="me-2"
      [(ngModel)]="JobOrderNum">
    <input dTextInput style="width: 180px;" [error]="false" placeholder="产品编码" name="产品编码" class="me-2"
      [(ngModel)]="PartNum">
    <input dTextInput style="width: 180px;" [error]="false" placeholder="产品名称" name="产品名称" class="me-2"
      [(ngModel)]="PartName">
    <input dTextInput style="width: 180px;" [error]="false" placeholder="工序编码" name="工序编码" class="me-2"
      [(ngModel)]="ProcessNum">
    <input dTextInput style="width: 180px;" [error]="false" placeholder="工序名称" name="工序名称" class="me-2"
      [(ngModel)]="ProcessName">
    <d-button id="primaryBtn" (click)="search()"><i class="icon icon-filter-o me-2"></i>查询</d-button>
    <d-button bsStyle="common" (click)="reset()"> <i class="icon icon-refresh me-2"></i>重置</d-button>
  </div>
  <div class="mt-3">
    <d-data-table [dataSource]="tableData" [lazy]="true" [scrollable]="true" [fixHeader]="true"
      [tableWidthConfig]="tableWidthConfig" (checkAllChange)="getCheckedRows()" [maxHeight]="'400px'"
      (rowCheckChange)="getCheckedRows()" [tableOverflowType]="'auto'" [scrollable]="true" [resizeable]="true">
      <thead dTableHead [checkable]="true">
        <tr dTableRow>

          <th dHeadCell [fixedLeft]="colOption.fixedLeft" *ngFor="let colOption of dataTableOptions.columns"
            [title]="colOption.header">
            {{colOption.header}}</th>
        </tr>
      </thead>
      <tbody dTableBody>
        <ng-template let-rowItem="rowItem" let-rowIndex="rowIndex" let-nestedIndex="nestedIndex">
          <tr>
            <td dTableCell [fixedLeft]="'0px'">
              <d-checkbox [disabled]="false" [showAnimation]="true" [ngModelOptions]="{ standalone: true }"
                [ngModel]="rowItem.$checked && (rowItem.$checked || rowItem.$halfChecked)" dTooltip
                [showGlowStyle]="false" (ngModelChange)="onRowCheckChange($event, rowIndex, nestedIndex, rowItem)">
              </d-checkbox>
            </td>
            <td dTableCell [fixedLeft]="'80px'">
              <span dTooltip [content]="rowItem.jobOrderNum">{{rowItem.jobOrderNum}}</span>
            </td>
            <td dTableCell>
              <span dTooltip [content]="rowItem.processNumber">{{rowItem.processNumber}}</span>
            </td>
            <td dTableCell>
              <span dTooltip [content]="rowItem.processNum">{{rowItem.processNum}}</span>
            </td>
            <td dTableCell>
              <span dTooltip [content]="rowItem.processName">{{rowItem.processName}}</span>
            </td>
            <td dTableCell>
              <span dTooltip [content]="rowItem.productNum">{{rowItem.productNum}}</span>
            </td>
            <td dTableCell>
              <span dTooltip [content]="rowItem.productName">{{rowItem.productName}}</span>
            </td>
            <td dTableCell>
              <span dTooltip [content]="rowItem.partType">{{rowItem.partType}}</span>
            </td>
            <td dTableCell dTooltip [content]="getUsers(rowItem.users)">
              <span>
                <span *ngFor="let a of rowItem.users; let isLast=last">{{a.name}}{{isLast ? '' : '，'}}</span>
              </span>
            </td>
            <td dTableCell>
              <span *ngIf="rowItem.isAssign" class="me-3">
                <div style="display: inline-block;">
                  <d-badge [showDot]="true" status="success" class="me-2"></d-badge>
                  <span dTooltip [content]="'已派工'">已派工</span>
                </div>
              </span>
              <span *ngIf="!rowItem.isAssign" class="me-3">
                <div style="display: inline-block;">
                  <d-badge [showDot]="true" status="waiting" class="me-2"></d-badge>
                  <span dTooltip [content]="'未派工'">未派工</span>
                </div>
              </span>
            </td>
            <td dTableCell>
              <span dTooltip [content]="rowItem.productionQuantity">{{rowItem.productionQuantity}}</span>
            </td>
            <td dTableCell>
              <d-progress [percentage]="(rowItem.qualifiedAmount / rowItem.productionQuantity) * 100">
                <ng-template [dPosition]="'center'">
                  <div class="overflow-ellipsis" [title]="rowItem.qualifiedAmount + '/' + rowItem.productionQuantity">
                    {{ rowItem.qualifiedAmount }}/{{rowItem.productionQuantity}}
                  </div>
                </ng-template>
              </d-progress>
            </td>
            <td dTableCell>
              <span dTooltip
                [content]="(rowItem.productionQuantity - rowItem.qualifiedAmount).toString()">{{rowItem.productionQuantity - rowItem.qualifiedAmount}}</span>
            </td>
            <td dTableCell>
              <span dTooltip
                [content]="rowItem.planStartTime">{{rowItem.planStartTime | date:'yyyy-MM-dd HH:mm:ss'}}</span>
            </td>
            <td dTableCell>
              <span dTooltip
                [content]="rowItem.planFinishTime">{{rowItem.planFinishTime | date:'yyyy-MM-dd HH:mm:ss'}}</span>
            </td>
          </tr>
        </ng-template>
      </tbody>
    </d-data-table>
  </div>
  <div class="page-footer">
    <div>
      <p>已选 <span class="underline">{{checkRows.length}}</span> 条
        <a (click)="cleared()" class="cleared">清空</a>
      </p>
    </div>
    <d-pagination [size]="'sm'" [canViewTotal]="true" [canChangePageSize]="true" [maxItems]="5"
      [total]="this.pager.total" [pageSizeOptions]="this.pageSizeOptions" [(pageSize)]="pager.pageSize"
      [(pageIndex)]="pager.pageIndex" (pageIndexChange)="pageIndexChange($event)"
      (pageSizeChange)="pageSizeChange($event)">
    </d-pagination>
  </div>
</div>
